<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row>
          <!-- 输入框 -->
          <el-col :span="21">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="关键字">
                <el-input
                  v-model="form.name"
                  style="width: 300px"
                  placeholder="根据编号搜索"
                />
              </el-form-item>
            </el-form>
          </el-col>
          <!-- 按钮 -->
          <el-col :span="3">
            <el-button @click="emptyInputValue">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-col>
          <!-- Alert 提示框 -->
          <el-col>
            <template>
              <el-alert
                :title="'数据一共' + alertTitle + '条'"
                type="info"
                show-icon
                :closable="false"
              />
            </template>
          </el-col>
          <!-- 表格 -->
          <el-col>
            <div class="randomsTable">
              <el-table
                :data="tableData"
                style="width: 100%"
                :header-cell-style="{
                  background: '#fafafa',
                  color: '#909399',
                  fontWeight: '700',
                  borderBottom: '2px solid #e8e8e8',
                }"
              >
                <el-table-column prop="id" label="编号" width="220" />
                <el-table-column prop="questionType" :formatter="formatter" label="题型" width="80" />
                <el-table-column
                  prop="questionIDs"
                  label="题目编号"
                  width="220"
                >
                  <template slot-scope="scope">
                    <div v-for="(obj, index) in scope.row.questionIDs" :key="index">
                      <a
                        style="color: rgb(0, 153, 255)"
                        @click="isdialogVisible(scope.row.questionType,obj.id)"
                        v-html="obj.number"
                      />
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="addTime" label="录入时间" width="180" />
                <el-table-column prop="totalSeconds" label="答题时间(s)" width="166" />
                <el-table-column prop="accuracyRate" label="正确率(%)" width="166" />
                <el-table-column prop="userName" label="录入人" width="245" />
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      circle
                      plain
                      @click="del(scope.row.id)"
                    />
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
          <!-- 分页 -->
          <el-col class="randomspagination">
            <el-pagination
              background
              :page-sizes="[20, 30, 50, 100]"
              layout=" prev,pager,next,sizes,jumper"
              :total="alertTitle"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-col>
        </el-row>
        <!-- 弹框 -->
        <el-dialog
          title="题目预览"
          width="50%"
          :visible.sync="dialogVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
        >
          <topic-preview
            v-if="dialogVisible"
            :tp-type="questionType"
            :tp-id="questionId"
            @close="close"
          />
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '../../api/hmmm/questions'
import { questionType } from '../../api/hmmm/constants'
// import TopicPreview from './components/TopicPreview.vue'
export default {
  // components: { TopicPreview },
  data() {
    return {
      dialogVisible: false, // 弹框显示
      form: {
        name: ''
      },
      alertTitle: 0, // 总条数
      tableData: [
        // {
        //   id: 'h44104979211124472661', // 编号
        //   addTime: '1988-04-27 21:47:36', // 录入时间
        //   userName: '钱超', // 用户名
        //   questionIDs: [
        //     {
        //       id: 21,
        //       number: 't09772023731311793335'
        //     }
        //   ], // 面试ID
        //   accuracyRate: '67', // 正确率
        //   totalSeconds: '2702', // 答题总耗时秒
        //   questionType: '1' // 组题类型
        // }
      ],
      query: {
        page: '1', // 当前页数
        pagesize: '20', // 页尺寸
        keyword: '' // 关键字
      },
      questionType: '', // 传给弹框 - Type
      questionId: '' // 传给弹框 - Id
    }
  },
  created() {
    this.randoms() // 组题列表
  },
  methods: {
    // 子组件传值 - 关闭弹框
    close() {
      this.dialogVisible = false
    },

    // 弹框显示
    isdialogVisible(type, id) {
      this.dialogVisible = true
      this.questionType = type
      this.questionId = id
    },

    // 清空输入框内容
    emptyInputValue() {
      this.form.name = ''
      this.query = {
        page: '1', // 当前页数
        pagesize: '20', // 页尺寸
        keyword: '' // 关键字
      }
      this.randoms() // 组题列表
    },

    // 搜索按钮
    async search() {
      this.query.keyword = this.form.name
      const res = await randoms(this.query)
      this.tableData = res.data.items
      this.alertTitle = res.data.counts
    },

    // 组题列表
    async randoms() {
      const res = await randoms(this.query)
      this.tableData = res.data.items
      this.alertTitle = res.data.counts
      // console.log(res)
    },

    // 删除按钮
    async del(id) {
      this.tableData.id = id
      const confirmRes = await this.$confirm(
        '此操作将永久删除该课题, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confirmRes === 'cancel') return this.$message('您以取消删除')

      // 前端删除
      const index = this.tableData.findIndex((item) => item.id === id)
      this.tableData.splice(index, 1)
      // 后端删除
      await removeRandoms(this.tableData)

      // 分页的判断
      if (this.tableData.length === 0) {
        this.query.page--
        if (this.query.page <= 0) {
          this.query.page = 1
        }
      }

      this.$message.success('成功删除')
      this.randoms() // 组题列表
    },

    // 分页 - 每页条数
    handleSizeChange(newSize) {
      this.query.pagesize = newSize
      this.randoms() // 组题列表
    },

    // 分页 - 当前页
    handleCurrentChange(newPage) {
      this.query.page = newPage
      this.randoms() // 组题列表
    },

    // 题型数据格式化
    formatter(row, column, cellValue, index) {
      const obj = questionType.find((item) => item.value === Number(cellValue))
      return obj ? obj.label : '未知'
    }

  }
}
</script>

<style scoped>
.randomsTable {
  margin-top: 20px;
}
.randomspagination {
  margin-top: 20px;
  text-align: right;
}
</style>
